<template>
    <view class="pt-md" style="background-color: #f4f6f7">
        <!-- <back></back> -->
        <view class="hideCanvasView">
            <l-painter class="hideCanvas" ref="painter" useCORS />
        </view>
        <view class="ml-md" v-if="src">
            <image :src="src" class="code-img radius-16" @tap="previewImage"></image>
            <view class="info_text fill-base flex-column mt-sm radius-16">
                <view class="f-paragraph mt-sm mb-md" style="color: #2f2f2f"> 邀请3步 </view>
                <view class="flex-between f-paragraph" style="color: #767676">
                    <view class="flex-y-center"> 1.分享海报 </view>
                    <image
                        mode="aspectFill"
                        class="info_text_img"
                        src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"
                    ></image>
                    <view class="flex-y-center"> 2.微信扫码 </view>
                    <image
                        mode="aspectFill"
                        class="info_text_img"
                        src="https://lbqny.migugu.com/admin/anmo/coupon/btn.png"
                    ></image>
                    <view class="flex-y-center"> 3.注册登录 </view>
                </view>
            </view>
            <view class="space-max-footer"></view>
            <fix-bottom-button
                @confirm="toPreviewSave"
                :text="[{ text: confirmText, type: 'confirm' }]"
                bgColor="#fff"
                :classType="2"
            >
            </fix-bottom-button>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
    components: {},
    props: {},
    data() {
        return {
            // #ifdef H5
            confirmText: "长按上图保存图片",
            // #endif
            // #ifndef H5
            confirmText: "保存图片至相册",
            // #endif
            src: "",
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        configInfo: (state) => state.config.configInfo,
        userInfo: (state) => state.user.userInfo,
    }),
    async onLoad(options) {
        // #ifdef H5
        if (this.$jweixin.isWechat()) {
            await this.$jweixin.initJssdk();
            this.$jweixin.wxReady(() => {
                this.$jweixin.hideOptionMenu();
            });
        }
        // #endif

        this.$util.showLoading();
        await this.getConfigInfo();
        this.$util.setNavigationBarColor({
            bg: this.primaryColor,
        });
        let that = this;
        setTimeout(() => {
            that.canvase();
        }, 1000);
    },
    methods: {
        ...mapActions(["getConfigInfo"]),
        async canvase() {
            let that = this;
            let qr_code = await this.$api.mine.userCommQr();
            let { promotion_poster_img = "" } = this.configInfo;
            let cover =
                promotion_poster_img || "https://lbqny.migugu.com/admin/anmo/mine/fx-share.png";
            let qr_radius = "0rpx";
            // #ifdef MP-WEIXIN
            qr_radius = "145rpx";
            // #endif

            let poster = {
                css: {
                    width: "710rpx",
                    height: "1152rpx",
                },
                views: [
                    {
                        type: "image",
                        src: cover,
                        css: {
                            width: "710rpx",
                            height: "1152rpx",
                            objectFit: "cover",
                            top: "0rpx",
                            left: "0rpx",
                            position: "absolute",
                        },
                    },
                    {
                        type: "image",
                        src: qr_code,
                        css: {
                            position: "absolute",
                            width: "290rpx",
                            height: "290rpx",
                            bottom: "70rpx",
                            left: "210rpx",
                            background: "#ffffff",
                            borderRadius: qr_radius,
                        },
                    },
                ],
            };
            // 渲染
            this.$refs.painter.render(poster);
            // 生成图片
            this.$refs.painter.canvasToTempFilePathSync({
                fileType: "jpg",
                quality: 1,
                success: (res) => {
                    that.$util.hideAll();
                    this.src = res.tempFilePath;
                },
            });
        },
        previewImage() {
            let finalPath = this.src;
            uni.previewImage({
                current: finalPath,
                urls: [finalPath],
            });
        },
        async saveImage() {
            await this.$util.checkAuth({
                type: "writePhotosAlbum",
            });
            let filePath = this.src;
            let [err, success] = await uni.saveImageToPhotosAlbum({
                filePath,
            });
            if (err) return;
            uni.showToast({
                icon: "none",
                title: "保存成功",
            });
        },
        toPreviewSave() {
            // #ifdef H5
            this.previewImage();
            // #endif
            // #ifndef H5
            this.saveImage();
            // #endif
        },
    },
};
</script>

<style>
.info_text {
    width: 710rpx;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.info_text_img {
    width: 20rpx;
    height: 20rpx;
}

.code-img {
    width: 710rpx;
    height: 1152rpx;
}
</style>
